<template>
    <div class="form-container">
      <a-form
        :model="formState"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <!-- 事件类型 -->
        <a-form-item label="事件类型">
          <a-select
            v-model:value="formState.eventType"
            placeholder="请选择事件类型"
            style="width: 100%"
          >
            <a-select-option value="type1">类型一</a-select-option>
            <a-select-option value="type2">类型二</a-select-option>
            <a-select-option value="type3">类型三</a-select-option>
          </a-select>
        </a-form-item>
  
        <!-- 事件名称 -->
        <a-form-item label="事件名称">
          <a-input v-model:value="formState.eventName" placeholder="请输入事件名称" />
        </a-form-item>
  
        <!-- 事件编号和事发时间 -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="事件编号" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-input v-model:value="formState.eventId" placeholder="请输入事件编号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="事发时间" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-date-picker
                v-model:value="formState.eventTime"
                show-time
                style="width: 100%"
                placeholder="选择事发时间"
              />
            </a-form-item>
          </a-col>
        </a-row>
  
        <!-- 行政区划和事件地址 -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="行政区划" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-cascader
                v-model:value="formState.region"
                :options="regionOptions"
                placeholder="请选择行政区划"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="事件地址" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-input v-model:value="formState.address" placeholder="请输入事件地址" />
            </a-form-item>
          </a-col>
        </a-row>
  
        <!-- 地图定位 -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="经度" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-input-number
                v-model:value="formState.longitude"
                style="width: 100%"
                placeholder="请输入经度"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="纬度" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-input-number
                v-model:value="formState.latitude"
                style="width: 100%"
                placeholder="请输入纬度"
              />
            </a-form-item>
          </a-col>
        </a-row>
  
        <!-- 详情 -->
        <a-form-item label="详情">
          <a-textarea
            v-model:value="formState.details"
            :rows="4"
            placeholder="请输入详情描述"
          />
        </a-form-item>
  
        <!-- 提交按钮 -->
        <a-form-item :wrapper-col="{ span: 18, offset: 4 }">
          <a-button type="primary" @click="onSubmit">提交</a-button>
          <a-button style="margin-left: 10px" @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  
  const formState = reactive({
    eventType: undefined,
    eventName: '',
    eventId: '',
    eventTime: null,
    region: [],
    address: '',
    longitude: null,
    latitude: null,
    details: ''
  });
  
  // 模拟行政区划数据
  const regionOptions = [
    {
      value: 'zhejiang',
      label: '浙江省',
      children: [
        {
          value: 'hangzhou',
          label: '杭州市',
          children: [
            {
              value: 'xihu',
              label: '西湖区'
            }
          ]
        }
      ]
    }
  ];
  
  const onSubmit = () => {
    console.log('表单数据：', formState);
  };
  
  const onReset = () => {
    Object.assign(formState, {
      eventType: undefined,
      eventName: '',
      eventId: '',
      eventTime: null,
      region: [],
      address: '',
      longitude: null,
      latitude: null,
      details: ''
    });
  };
  </script>
  
  <style scoped>
  .form-container {
    padding: 24px;
    background: #efefef;
    min-height: 100vh;
  }
  
  .ant-form-item {
    margin-bottom: 24px;
  }
  
  /* 自定义表单标签样式 */
  :deep(.ant-form-item-label > label) {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
  }
  
  /* 自定义输入框样式 */
  :deep(.ant-input),
  :deep(.ant-select-selector),
  :deep(.ant-picker),
  :deep(.ant-input-number),
  :deep(.ant-cascader-picker) {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    transition: all 0.3s;
    background-color: #e6f7ff;
  }
  
  /* 输入框聚焦时的样式 */
  :deep(.ant-input:focus),
  :deep(.ant-select-selector:focus),
  :deep(.ant-picker-focused),
  :deep(.ant-input-number-focused),
  :deep(.ant-cascader-picker-focused) {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    background-color: #e6f7ff;
  }
  
  /* 文本域样式 */
  :deep(.ant-input-textarea) {
    border-radius: 4px;
    background-color: #e6f7ff;
  }
  
  /* 按钮样式 */
  :deep(.ant-btn) {
    border-radius: 4px;
    height: 32px;
    padding: 0 15px;
  }
  
  :deep(.ant-btn-primary) {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }
  
  :deep(.ant-btn-primary:hover) {
    background-color: #40a9ff;
    border-color: #40a9ff;
    color: #fff;
  }
  
  /* 重置按钮样式 */
  :deep(.ant-btn:not(.ant-btn-primary)) {
    background-color: transparent;
    border-color: #1890ff;
    color: #1890ff;
  }
  
  :deep(.ant-btn:not(.ant-btn-primary):hover) {
    background-color: rgba(24, 144, 255, 0.1);
    border-color: #40a9ff;
    color: #40a9ff;
  }
  </style>